<template>
	<view class="container user-broker yuan-form">
		<view class="page-main">

			<view class="pange-panel">
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">所属单位:</view>
					<input class="yuan-input" v-model="formData.placeUnit" placeholder="请输入所属单位"
						placeholder-class="placeholder-style">
				</view>
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">能力等级:</view>
					<picker class="yuan-input" mode="selector" :range="capabilityLevelArr"
						@change="capabilityLevelArrChange">
						<view>
							<view class="picker-input" v-if="formData.capabilityLevel">
								{{formData.capabilityLevel}}
							</view>
							<view class="picker-input placeholder-style" v-else>请选择能力等级</view>
						</view>

					</picker>
					<view class="list-ico iconfont">&#xe775;</view>
				</view>
				<view class="yuan-form-row">
					<view class="yuan-form-label yuan-label-must">相关证书、证明:</view>
					<UploadVue @imgChange="certificateChange" />
				</view>
				<view class="yuan-form-row">
					<view class="yuan-form-label">简介:</view>
					<textarea class="yuan-textarea" v-model="formData.skillBriefIntroduction" placeholder="请输入简介"
						placeholder-class="placeholder-style" :maxlength="1000" />
				</view>
				<view class="case-panel">
					<view class="case-box">
						<view class="case-list" v-for="(item,idx) in caseList" :key="'case_'+idx">
							<view class="case-title">
								<text>从业案例{{idx+1}}：</text>
								<text class="yuan-btn btn-danger" @click="delCase(idx)"
									v-if="caseList.length>1">删除</text>
							</view>
							<view class="yuan-form-list">
								<view class="yuan-form-label">项目名称:</view>
								<input class="yuan-input" v-model="item.name" placeholder="请输入项目名称"
									placeholder-class="placeholder-style">
							</view>
							<view class="yuan-form-list">
								<view class="yuan-form-label">日期:</view>
								<picker class="yuan-input" mode="date" :end="$format(new Date(),'yyyy-MM-dd')"
									@change="(e)=>caseDateChange(e,idx)">
									<view class="yx-input picker-input" v-if="item.date">
										{{item.date}}
									</view>
									<view class="yx-input picker-input placeholder-style" v-else>请选择成立日期</view>
								</picker>
								<view class="list-ico iconfont">&#xe775;</view>
							</view>
							<view class="yuan-form-list">
								<view class="yuan-form-label">转化类型:</view>
								<input class="yuan-input" v-model="item.type" placeholder="请输入转化类型"
									placeholder-class="placeholder-style">
							</view>
							<view class="yuan-form-list">
								<view class="yuan-form-label">促成转化金额:</view>
								<input class="yuan-input" v-model="item.money" placeholder="请输入促成转化金额"
									placeholder-class="placeholder-style">
							</view>
						</view>
						<view class="yuan-btn btn-primary add-case" @click="addCase">新增从业案例</view>
					</view>

				</view>
				<view class="yuan-form-row">
					<view class="yuan-form-label">相关图片:</view>
					<UploadVue @imgChange="skillCorrelationPictureChange" />
				</view>




			</view>
		</view>


		<view class="bottom-btn-box">
			<view class="yuan-btn btn-primary bottom-btn" @click="clickSave">提交认证</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import UploadVue from "@/components/upload.vue"
	import { hideLoading, showLoading, showToast } from "@/common/util";
import api from "../../common/api";
	let formData = ref<any>({})
	const clickSave = async () => {
		if (!formData.value.placeUnit) {
			showToast('请输入所属单位')
			return
		}
		if (!formData.value.capabilityLevel) {
			showToast('请选择能力等级')
			return
		}
		if (!formData.value.certificate) {
			showToast('请上传相关证明、文件')
			return
		}

		showLoading()

		try {
			const res = await api.brokerRegister({
				...formData.value,
				practitionerCase: caseList.value,
			});
			showToast("申请成功,请等待后台人员审核");
			formData.value = {}
			caseList.value=[]
			uni.navigateBack()
		} finally {
			hideLoading()
		}
	}
	onMounted(() => {

	})

	const capabilityLevelArr = reactive(['初级技术经纪人', '中级技术经纪人', '高级技术经纪人'])
	const capabilityLevelArrChange = (e : any) => {
		formData.value.capabilityLevel = capabilityLevelArr[e.detail.value]
	}

	const certificateChange = (imgList : string[]) => {
		formData.value.certificate = imgList
	}
	const skillCorrelationPictureChange = (imgList : string[]) => {
		formData.value.skillCorrelationPicture = imgList
	}


	const caseList = ref<any[]>([{}]);
	const addCase = () => {
		caseList.value.push({});
	}
	const delCase = (index : number) => {
		caseList.value.splice(index, 1);
	}
	const caseDateChange = (e : any, idx : number) => {
		caseList.value[idx].date = e.detail.value + ''
	}
</script>

<style lang="scss">
	.user-broker {
		padding-bottom: 120rpx;

		.pange-panel {
			background-color: #fff;
			box-shadow: 0px 8rpx 12rpx 0px rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 0 15rpx;
		}

		.page-main {
			padding: 30rpx;
		}

		.bottom-btn-box {
			width: 680rpx;
			margin: 0 auto;
			margin-top: 20px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}

		.case-title {
			font-size: 26rpx;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.yuan-btn {
				width: 90rpx;
				height: 45rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
			}
		}

		.case-list {
			margin-top: 20rpx;
			background-color: #f7f7f7;
			padding: 20rpx;
			border-radius: 8rpx;
		}

		.add-case {
			width: 260rpx;
			height: 60rpx;
			border-radius: 8rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			font-size: 26rpx;
		}


	}
</style>